<template>
    <div>
        <mainTitle :name="title"></mainTitle>

        <h1>添加商品</h1>
        <el-form label-width="80px" label-position="right" :model="formLabelAlign">

            <el-form-item label="商品id">
                <el-input v-model="formLabelAlign.id"></el-input>
            </el-form-item>
            <el-form-item label="商品名称">
                <el-input v-model="formLabelAlign.name"></el-input>
            </el-form-item>

            <el-form-item label="商品类别">
                <el-input v-model="formLabelAlign.category"></el-input>
            </el-form-item>
            <el-form-item label="商品描述">
                <el-input v-model="formLabelAlign.desc"></el-input>
            </el-form-item>
            <el-form-item label="店铺地址">
                <el-input v-model="formLabelAlign.address"></el-input>
            </el-form-item>
            <el-form-item label="店铺名称">
                <el-input v-model="formLabelAlign.shop"></el-input>
            </el-form-item>
            <el-form-item label="店铺id">
                <el-input v-model="formLabelAlign.shopId"></el-input>
            </el-form-item>
            <el-button type="primary" @click="add">添加</el-button>
        </el-form>
        
    </div>
</template>

<script>
import { Message } from 'element-ui'
import mainTitle from '../../components/MainTitle.vue'

export default {
    name: 'addcommodity',
    components: {
        mainTitle
    },
    data() {
        return {
            labelPosition: 'top',
            formLabelAlign: {
                id: '12987122',
                name: '好滋好味鸡蛋仔',
                category: '江浙小吃、小吃零食',
                desc: '荷兰优质淡奶，奶香浓而不腻',
                address: '上海市普陀区真北路',
                shop: '王小虎夫妻店',
                shopId: '10333'
            }
        }
    },
    methods: {
        add(){

            let str = JSON.stringify(this.formLabelAlign)
            this.$axios.get(`http://localhost:8080/api/addcommodity?obj=${str}`).then(res => {
                if(res.data.Code == -2) Message.error('添加失败，token认证失败！！！') 
                else if(res.data.Code == -1) Message.error('token不存在！！')
                else Message.success('添加成功！！！')
            },err => {
                Message.error('请求出现问题！！'+err)
            })
        }
    }
}
</script>

<style lang="less" scoped>
.el-form {
    width: 500px;

    .el-form-item{
        margin: 20px 0;
    }
}

.el-form-item {
    margin-bottom: 0;
}
</style>